<template>
  <div class="layout_header">
    <div class="yh_title">
      <span class="yh_img" style="font-size: 14px;color: #67C239;font-weight: 700;margin-left: 15px">{{ProductName}}</span>
      <span class="yh_name" style="font-size: 14px;font-weight: bolder;color: white;margin-left: 5px">YHTEST</span>
    </div>
    <nav style="display:flex;flex-wrap: nowrap;font-size: 14px">
      <router-link active-class="active" v-for="item in menuList" :to="item.path" :key="item.path">{{ item.name }}
      </router-link>
    </nav>
    <div class="yh_info">
      <el-button type="success" link @click="toMobile">移动端</el-button>
      <el-button type="success" link @click="router.push('/largeScreen')">大屏</el-button>
      <el-button type="success" link @click="toAdmin">多页面html</el-button>
      <span style="margin-left: 10px; display: none">{{moment(flg_nowTime).format('YYYY-MM-DD HH:mm:ss')}}</span>
      <el-dropdown style="margin-left: 20px" @command="logout">
        <div class="username">
          <a href="javascript:void(0)">{{ user.name }}<el-icon class="el-icon--right"><arrow-down /></el-icon></a>
        </div>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item>注销登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
      |
      <span class="white" id="nowTime">{{ nowTime ? moment(nowTime).format('YYYY-MM-DD HH:mm:ss') : '时间获取中......' }}</span>
      <i class="iconfont i-icon-person-ertong" style="cursor: pointer" @click="getNowTime"></i>
    </div>
  </div>
</template>

<script setup>
import {nextTick, onMounted, onUnmounted, ref, watch} from "vue";
import router from "@/router";
import {ElMessage} from "element-plus";
import {useGlobalProperties} from "../hooks/globalVar";
let {ProductName} = useGlobalProperties()
import {httpRequest} from "@/untils/httpRequest.ts";

let menuList = localStorage.getItem("menu_list") ? JSON.parse(localStorage.getItem("menu_list") || "") : []
let user = localStorage.getItem("user") ? JSON.parse(localStorage.getItem("user") || "") : ""
let flg_nowTime = ref('')
let flgTimer = ref(null)
let moment = require('moment')
let nowTime = ref('')
let timerWorker = ref(null)

//注销登出
function logout() {
  httpRequest("post", "/user/logout", null, null, "proxy").then(res => {
    if (res?.data?.code === 200) {
      localStorage.removeItem("menu_list");
      localStorage.removeItem("user");
      router.push("/login");
      ElMessage.success(res?.data?.msg)
    }
  })
}

function getNowTime() {
  terminate()
  nextTick(() => {
    timerWorker.value = new Worker(new URL('@/workers/timerWorker.js', import.meta.url))
    httpRequest("post", "/user/getTime", null, null, "proxy").then(res => {
      if (res?.data?.code === 200) {
        // 主线程发送信息到worker线程
        timerWorker.value.postMessage({time: res?.data?.data})
        // 主线程接收worker线程的结果
        timerWorker.value.onmessage = (e) => {
          nowTime.value = e.data
        }
        flg_nowTime.value = res?.data?.data
        flgTimer.value = setInterval(() => {
          flg_nowTime.value = flg_nowTime.value + 1000
        }, 1000);
      }
    })
  })
}

function terminate() {
  if (timerWorker.value) {
    timerWorker.value.terminate()
    timerWorker.value = null
  }
  if (flgTimer.value) {
    clearInterval(flgTimer.value)
    flgTimer.value = null
  }
}

watch(()=>router.currentRoute.value.path,(toPath)=>{
  if (menuList.length > 0) {
    if (toPath === '/') router.push(menuList[0].path)
  } else {
    router.push('/login')
  }
},{ immediate: true, deep: true})

onMounted(() => {
  setTimeout(() => {
    getNowTime()
  }, 0)
})
onUnmounted(() => {
  terminate()
})

const toAdmin = () => {
  httpRequest("get", "/toAdmin", null, null, "proxy")
}
const toMobile = () => {
  // router.push('/mobile/home')
  window.open('http://8.137.37.23:81/#/')
}
</script>

<style scoped lang="less">
.layout_header {
  width: 100%;
  height: 44px;
  background-color: rgba(16, 17, 23, 1);
  display: flex;
  align-items: center;
  position: relative;
  flex-wrap: nowrap;

  .yh_title {
    min-width: 200px;
    height: 44px;
    line-height: 44px;
  }

  nav a {
    display: inline-block;
    min-width: 110px;
    height: 44px;
    line-height: 44px;
    text-align: center;
    color: white;
  }

  nav a:hover {
    color: white;
  }

  .active {
    border-bottom: 4px solid #2D8CF0FF;
    font-weight: bold;
    color: white;
    background-color: rgb(34, 35, 36);
  }

  .white {
    color: white;
    margin-left: 5px;
    margin-right: 5px;
  }

  .yh_info {
    height: 44px;
    line-height: 44px;
    display: flex;
    align-items: center;
    position: absolute;
    right: 10px;
    font-size: 14px;
  }
  .username a {
    color: #01e3f6;
  }
}
</style>